<template>
	<view class="cart">
    <!-- 轮播图 -->
		<swiper :autoplay="true" :interval="3000" :duration="1000" class="swiperList" @change="swiperChange">
			<swiper-item v-for="item in swiper" :key="item.id">
				<view class="swiper-item">
					<image :src="item.image" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
    <view class="indicator">{{currentIndex +1}} / {{swiper.length}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        currentIndex:'0',
				swiper:[
          { id:1,image:"../../static/image/banana.png"},
          { id:2,image:"../../static/image/banana.png"},
          { id:3,image:"../../static/image/banana.png"},
          { id:4,image:"../../static/image/banana.png"}
        ]
			}
		},
		methods: {
			swiperChange(e){
        this.currentIndex = e.detail.current
        // console.log(e);
      }
		}
	}
</script>

<style lang="scss">
.cart{
  // 轮播
  .swiperList{
  	// border: 1px solid;
  	border-radius: 40rpx;
  	margin-bottom: 20rpx;
  	height: 400rpx;
  	image{
  		width: 100%;
  		height: 400rpx;
  		border-radius: 40rpx;
  	}
  }
  // 指示器
  .indicator{
  	position: absolute;
  	top: 320rpx;
  	right: 40rpx;
  	// border: 1rpx solid ;
  	color:white;
  	border-radius: 40rpx;
  	width: 100rpx;
  	text-align: center;
  	background-color: rgba(0, 0, 0,0.2);
  }
}
</style>
